<div class="row">
    <div class="col-lg-12">
        <h2>Create Your Own Directives</h2>
        <p>We feel that the value of directives (or web components for that matter) is to package up complex components, exposing a limited, simple declarative interface as HTML elements &amp; attributes. We believe that you will have the best success integrating maps with your angular applications if you build directives that focus on your problem domain. For example, you can imagine the following map directives:
        </p>
        <div hljs no-escape>&lt;parcel-map pin=&quot;ABC123&quot;&gt;&lt;/parcel-map&gt;
&lt;lot-layout-map lot=&quot;93920-A-23&quot;&gt;&lt;/lot-layout-map&gt;
&lt;workorder-map order=&quot;10-31-14-002&quot;&gt;&lt;/workorder-map&gt;</div>
        <p>These directives could be easily integrated into any views in the over-arching application, or even shared across a suite of applications.
        <h3>Using the <code>esri.core</code> Module</h3>
        <p>The directives in the <code>esri.map</code> module use services from a module called <code>esri.core</code>. This dependency is bundled into angular-esri-map.js, but the release also builds this module into a standalone file, angular-esri-core.js. You can use the <a href="docs/#/api/esri.core">services in this module</a> to help you create your own map and layer directives.</p>
        <p> See the <a href="./custom-directive.html">custom directive page</a> for a demonstration of this pattern. The source code is below:</p>
        <div hljs include="'./custom-directive.html'"></div>
        <h3>Additional Examples</h3>
        <p>These other applications demonstrate the custom directive pattern:</p>
        <ul>
            <li><a href="http://tomwayson.github.io/angular-parcel-map/">Parcel Map</a> - a demo application featuring a custom directive for mapping parcels</li>
            <li><a href="http://jwasil.github.io/angular-esri-playground/">Angular Esri Playground</a> - features a custom directive for mapping points as clusters or as a heat map.</li>
        </ul>
    </div>
</div>
